<template>
  <div class="app-container edit-page">

    <!-- 基本信息表单 -->
    <el-card shadow="never" class="box-card info-card">
      <div slot="header"  class="card-header">
        <span class="header-title">规划基本信息</span>
<!--        <div class="header-actions">-->
<!--          <el-button-->
<!--            type="primary"-->
<!--            :loading="buttonLoading"-->
<!--            @click="submitForm2"-->
<!--            v-if="form.dataStatus === 0 || form.dataStatus === 2"-->
<!--          >-->
<!--            提交-->
<!--          </el-button>-->
<!--          <el-button-->
<!--            type="primary"-->
<!--            :loading="buttonLoading"-->
<!--            @click="submitForm1"-->
<!--            v-if="form.dataStatus === 0 || form.dataStatus === 2"-->
<!--          >-->
<!--            保存-->
<!--          </el-button>-->
<!--          <el-button @click="submitBack">返回</el-button>-->
<!--        </div>-->
      </div>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px" :disabled="!(form.dataStatus === 0 || form.dataStatus === 2)">
        <el-row :gutter="30">
          <el-col :xs="24" :sm="12" :md="12" :lg="8">
            <el-form-item label="规划名称" prop="planName">
              <el-input v-model="form.planName" placeholder="请输入规划名称" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8">
            <el-form-item label="发布日期" prop="planSendDate">
              <el-date-picker
                v-model="form.planSendDate"
                type="date"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="请选择发布日期"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8">
            <el-form-item label="规划类型" prop="planType">
              <el-select v-model="form.planType" placeholder="请选择规划类型" style="width:100%">
                <el-option
                  v-for="dict in dict.type.plan_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8">
            <el-form-item label="规划期" prop="planDeadline">
              <el-select v-model="form.planDeadline" placeholder="请选择规划期" style="width:100%">
                <el-option
                  v-for="dict in dict.type.plan_deadline"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8">
            <el-form-item label="编制单位" prop="preparedBy">
              <el-input v-model="form.preparedBy" placeholder="请输入编制单位" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8">
            <el-form-item label="主体单位" prop="mainEntity">
              <el-input v-model="form.mainEntity" placeholder="请输入主体单位" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="重点任务" prop="majorProject">
              <el-input
                type="textarea"
                v-model="form.majorProject"
                placeholder="请输入重点任务"
                :rows="3"
                maxlength="500"
                show-word-limit
              />
            </el-form-item>
          </el-col>
<!--          <el-col :span="24">-->
<!--            <el-form-item label="备注" prop="remark">-->
<!--              <el-input-->
<!--                type="textarea"-->
<!--                v-model="form.remark"-->
<!--                placeholder="请输入备注"-->
<!--                :rows="3"-->
<!--                maxlength="200"-->
<!--                show-word-limit-->
<!--              />-->
<!--            </el-form-item>-->
<!--          </el-col>-->
        </el-row>
      </el-form>
    </el-card>

    <!-- 附件上传区域 -->
    <el-card shadow="never" class="box-card upload-card">
      <div slot="header" class="card-header">
        <span class="header-title">规划资料</span>
      </div>

      <el-form :model="form" label-width="140px" :disabled="!(form.dataStatus === 0 || form.dataStatus === 2)">
        <el-row :gutter="30">
          <el-col :xs="24" :sm="24" :md="8" class="my-el-col">
            <el-form-item label="规划原文">
              <FileUpload v-model="filePlanDocArray" :limit="1" :fileType="['pdf']" :fileSize="25" :show-delete-button="(form.dataStatus === 0 || form.dataStatus === 2)"/>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="24" :md="8" class="my-el-col">
            <el-form-item label="规划总图">
              <FileUpload v-model="filePlanImgArray" :limit="1" :fileType="['jpg','png','jpeg','pdf']" :fileSize="25" :show-delete-button="(form.dataStatus === 0 || form.dataStatus === 2)"/>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="24" :md="8" class="my-el-col">
            <el-form-item label="规划用地地图">
              <FileUpload v-model="fileLandMapArray" :fileType="['dwg','shp']" :limit="1" :fileSize="50" :show-delete-button="(form.dataStatus === 0 || form.dataStatus === 2)"/>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="24" :md="8">
            <el-form-item label="规划目标/指标" class="my-el-col">
              <FileUpload v-model="fileIndexArray" :fileType="['jpg','png','jpeg','pdf']" :limit="1" :fileSize="25" :show-delete-button="(form.dataStatus === 0 || form.dataStatus === 2)"/>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="24" :md="8" class="my-el-col">
            <el-form-item label="项目库表">
              <FileUpload v-model="fileProjectArray" :fileType="['jpg','png','jpeg','pdf']" :limit="1" :fileSize="25" :show-delete-button="(form.dataStatus === 0 || form.dataStatus === 2)"/>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="24" :md="8" class="my-el-col">
            <el-form-item label="其他资料">
              <FileUpload v-model="fileOtherArray" :fileType="['rar','zip','pdf','doc','docx','jpg','png']" :limit="3" :fileSize="25" :show-delete-button="(form.dataStatus === 0 || form.dataStatus === 2)"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>


    <!-- 页面底部按钮 -->
    <div class="bottom-actions">
      <el-button
        type="primary"
        :loading="buttonLoading"
        @click="submitForm2"
        v-if="form.dataStatus === 0 || form.dataStatus === 2"
      >提交</el-button>
      <el-button
        type="primary"
        :loading="buttonLoading"
        @click="submitForm1"
        v-if="form.dataStatus === 0 || form.dataStatus === 2"
      >保存</el-button>
      <el-button @click="submitBack">返回</el-button>
    </div>
  </div>
</template>

<script>
import FileUpload from "@/components/FileUpload";
import { getTransportPlan, addTransportPlan, updateTransportPlan } from "@/api/dataBase/transportPlan";

export default {
  name: "TransportPlanEdit",
  components: { FileUpload },
  dicts: ['plan_type', 'plan_deadline'],
  data() {
    return {
      buttonLoading: false,
      form: {
        id: null,
        planName: "",
        planSendDate: "",
        planType: "",
        planDeadline: "",
        preparedBy: "",
        mainEntity: "",
        remark: "",
        majorProject: "",
        dataStatus: 0,
        fileList1: "",
        fileList2: "",
        fileList3: "",
        fileList4: "",
        fileList5: "",
        fileList6: "",
      },
      rules: {
        planName: [{ required: true, message: "请输入规划名称", trigger: "blur" }],
        planSendDate: [{ required: true, message: "请选择发布日期", trigger: "change" }],
        planType: [{ required: true, message: "请输入规划期", trigger: "blur" }],
        planDeadline: [{ required: true, message: "请输入规划期", trigger: "blur" }],
        preparedBy: [{ required: true, message: "请输入编制单位", trigger: "blur" }],
        mainEntity: [{ required: true, message: "请输入主体单位", trigger: "blur" }],
        majorProject: [{ required: true, message: "请输入重点任务", trigger: "blur" }],
      }
    };
  },
  computed: {
    filePlanDocArray: {
      get() { return this.form.fileList1; },
      set(val) { this.form.fileList1 = val; }
    },
    filePlanImgArray: {
      get() { return this.form.fileList2; },
      set(val) { this.form.fileList2 = val; }
    },
    fileLandMapArray: {
      get() { return this.form.fileList3; },
      set(val) { this.form.fileList3 = val; }
    },
    fileIndexArray: {
      get() { return this.form.fileList4; },
      set(val) { this.form.fileList4 = val; }
    },
    fileProjectArray: {
      get() { return this.form.fileList5; },
      set(val) { this.form.fileList5 = val; }
    },
    fileOtherArray: {
      get() { return this.form.fileList6; },
      set(val) { this.form.fileList6 = val; }
    }
  },
  created() {
    const id = this.$route.query.id;
    if (id) {
      this.loadData(id);
    }
  },
  methods: {
    async loadData(id) {
      try {
        const res = await getTransportPlan(id);
        this.form = { ...res.data };
      } catch (err) {
        this.$message.error("加载数据失败");
      }
    },
    submitBack() {
      const obj = { path: "/transportPlan" };
      // const obj = { path: "/base-data/transportPlan" };
      this.$tab.closeOpenPage(obj);
    },
    submitForm1() {
      this.$refs.form.validate(async valid => {
        if (!valid) return;
        this.buttonLoading = true;
        try {
          this.form.dataStatus = 0;
          if (this.form.id) {
            await updateTransportPlan(this.form);
            this.$message.success("保存成功");
          } else {
            await addTransportPlan(this.form);
            this.$message.success("保存成功");
          }
          this.submitBack();
        } catch (err) {
          this.$message.error("保存失败");
        } finally {
          this.buttonLoading = false;
        }
      });
    },
    submitForm2() {
      this.$refs.form.validate(async valid => {
        if (!valid) return;
        this.buttonLoading = true;
        try {
          this.form.dataStatus = 1;
          if (this.form.id) {
            await updateTransportPlan(this.form);
            this.$message.success("提交成功");
          } else {
            await addTransportPlan(this.form);
            this.$message.success("提交成功");
          }
          this.submitBack();
        } catch (err) {
          this.$message.error("提交失败");
        } finally {
          this.buttonLoading = false;
        }
      });
    }
  }
};
</script>

<style scoped>
.app-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 84px);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-actions {
  display: flex;
  gap: 10px;
}
.box-card {
  border-radius: 8px;
  border: 1px solid #e6e8eb;
  margin-bottom: 20px;
}
.my-el-col{
  height: 160px;
}

/* 底部按钮样式 */
/* 固定底部 */
.bottom-actions {
  display: flex;
  justify-content: center; /* 居中按钮 */
  gap: 12px;               /* 按钮间距 */
  padding: 20px 0;
  margin-top: 20px;
  border-top: 1px solid #e6e8eb;
  background-color: #fff;
}
</style>
